<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>最新公告</title>
    <link th:href="@{/layui/css/layui.css}" href="../../../static/layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
    <table class="layui-hide" id="noticeTable" lay-filter="noticeTable"></table>

    <script type="text/html" id="topBar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-normal" lay-event="add">添加</button>
        </div>
    </script>

    <script type="text/html" id="rightBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>


    <script src="../../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>

    <script>
        layui.use(['table','layer'], function(){
            var table = layui.table,
                $=layui.jquery,
                layer=layui.layer;


            table.render({
                elem: '#noticeTable'
                ,url:'/notice/queryListPage'
                ,toolbar: '#topBar'
                ,title: '权限数据表'
                ,cols: [  [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'ID', width:80, fixed: 'left'}
                    ,{field:'title', title:'名称', width:120}
                    ,{field:'description', title:'描述', width:220}
                    ,{field:'content', title:'内容', width:220}
                    ,{fixed: 'right', title:'操作', toolbar: '#rightBar', width:250}
                ]  ]
                ,page: true
            });

            //头工具栏事件
            table.on('toolbar(noticeTable)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                switch(obj.event){
                    case 'add':
                        var open = layer.open({
                            type: 2,
                            area:['700px','460px'],
                            title: "添加",
                            content: "/notice/add"
                        });
                        break;
                }
            });

            //监听行工具事件
            table.on('tool(noticeTable)', function(obj){
                var data = obj.data;
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            url:"/notice/delete",
                            type:"POST",
                            data:{"id":data.id},
                            success:function (e) {
                                if(e.success){
                                    obj.del();
                                    layer.close(index);
                                }else{
                                    alert(e.message())
                                }
                            },dataType:"json"
                        });

                    });
                } else if(obj.event === 'edit'){
                    var open = layer.open({
                        type: 2,
                        area:['700px','460px'],
                        title: "修改",
                        content: "/notice/edit?id="+data.id
                    });
                }
            });

        });
    </script>
</body>
</html>